/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,} from 'react-native';
import {Icon} from 'native-base'
import HomeScreen from "./src/HomeScreen"

import {
  createAppContainer,
  createBottomTabNavigator,
  createStackNavigator,
  createSwitchNavigator
} from "react-navigation";
import SettingsScreen from "./src/SettingsScreen"
import DxScreen from "./src/DxScreen"

const TabNavigator = createBottomTabNavigator({
  Home: {
    navigationOptions: {
      tabBarIcon: ({tintColor, focused,}) =>
          <Icon style={{fontSize: 20, color: tintColor}} name="md-arrow-dropdown-circle"/>
      ,
      tabBarLabel: 'Home',
    },
    screen: HomeScreen,
  },
  DxScreen: {
    navigationOptions: {
      tabBarIcon: ({tintColor, focused,}) =>
          <Icon style={{fontSize: 20, color: tintColor}} name="md-archive"/>
      ,
      tabBarLabel: 'Home',
    },
    screen: DxScreen
  },
  Settings: {
    navigationOptions: {
      tabBarIcon: ({tintColor, focused,}) =>
          <Icon style={{fontSize: 20, color: tintColor}} name="md-american-football"/>
      ,
      tabBarLabel: 'Home',
    },
    screen: SettingsScreen
  },
});


const AppRoot = createAppContainer(TabNavigator)

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
        <AppRoot/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
